<template>
	<view class="content-box">
		<!-- 用户信息区域 -->
		<view class="user-info">
			<view class="user-header">
				<image class="avatar" :src="userInfo.avatar || '/static/icon/touxiang.png'" mode="aspectFill" :style="{ backgroundColor: userInfo.avatarBg || '#f0f0f0' }"></image>
				<view class="user-name">
					<text class="name">{{ formatNickname(userInfo.nickname || '') }}</text>
					<text class="email">{{ userInfo.email || 'wangsheng@gmail.com' }}</text>
				</view>
			</view>
			<view class="notification" @click="toMessage">
				<image src="/static/image/my/lingdang.svg" mode="aspectFit"></image>
				<view class="red-dot"></view>
			</view>
		</view>

		<!-- 信用分 -->
		<view class="credit-score" @click="goCredit">
			<image src="/static/image/my/xinyong.svg" mode=""></image>
			<view class="credit-icon">{{t('credit.xyf')}}:{{ userInfo.creditScore || 100 }}</view>
		</view>

		<!-- 资产信息 -->
		<view class="asset-info" @click="goWallet">
			<view class="asset-header">
				<view class="left">
					<view class="title">
						<text>{{ t('my.zzcz') }}</text>
						<text class="title-us">（USDT）</text>
					</view>
					<view class="amount">{{ userInfo.availableBalance.toFixed(2) }}</view>
					<view class="convert">≈ ¥ {{ userInfo.availableBalance.toFixed(2) }}</view>
				</view>
				<view class="middle">
					<!-- <text class="label">{{ t('my.zhbh') }}</text> -->
					<view class="label">{{t('my.zhyk')}}</view>
					<view class="value" :class="profitData.totalProfit >= 0 ? 'positive' : 'negative'">
						{{ profitData.totalProfit >= 0 ? '+' : '' }}{{ profitData.totalProfit.toFixed(2) }}
					</view>
				</view>
				<view class="right">
					<view class="asset-chart" style="margin-bottom: 8rpx;">
						<kLine lineColor="#0DB364" containerLineSeries="homeContainerAreaSeries7" :content="accountAmount" width="70" height="32"></kLine>
					</view>
					<view class="detail-item">
						<view class="label">{{ t('my.jrsy') }}</view>
						<view class="value" :class="incomeData.todayProfit >= 0 ? 'positive' : 'negative'">
							{{ incomeData.todayProfit >= 0 ? '+' : '' }}{{ incomeData.todayProfit.toFixed(2) }}
						</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 质押冻结 -->
		<view class="middle-box">
			<view class="frozen-asset">
				<view class="info-icon" @click="openQuestionModal">
					<image src="/static/image/my/wenhao.svg" mode="aspectFit"></image>
				</view>
				<view class="frozen-title">
					<text class="title-text">{{t('my.zydj')}}</text>
					<text class="title-us">（USDT）</text>
				</view>
				<text class="frozen-amount">{{ profitData.frozenAmount.toFixed(2) }}</text>
			</view>

			<!-- 充值提现按钮 -->
			<view class="action-button" @click="goRechange">
				<image src="/static/image/my/cz2.svg" mode="aspectFit"></image>
				<view class="text">{{ t('my.cz') }}</view>
			</view>
			<view class="action-button" @click="goWithdraw">
				<image src="/static/image/my/tx2.svg" mode="aspectFit"></image>
				<view class="text">{{ t('my.tx') }}</view>
			</view>
		</view>
		<!-- 菜单列表 -->
		<view class="menu-list">
			<view class="menu-item" @click="goHistroy">
				<view class="menu-icon bg1">
					<image src="/static/image/my/lszd.svg" mode="aspectFit"></image>
				</view>
				<text class="menu-text">{{ t('my.lszd') }}</text>
				<image class="arrow" src="/static/icon/right.svg" mode="aspectFit"></image>
			</view>

			<view class="menu-item" @click="goMyInfo">
				<view class="menu-icon bg2">
					<image src="/static/image/my/grxx.svg" mode="aspectFit"></image>
				</view>
				<text class="menu-text">{{ t('my.grxx') }}</text>
				<image class="arrow" src="/static/icon/right.svg" mode="aspectFit"></image>
			</view>

			<view class="menu-item" @click="goRealName">
				<view class="menu-icon bg3">
					<image src="/static/image/my/smrz.svg" mode="aspectFit"></image>
				</view>
				<text class="menu-text">{{ t('my.smrz') }}</text>
				<image class="arrow" src="/static/icon/right.svg" mode="aspectFit"></image>
			</view>

			<view class="menu-item" @click="toFaq">
				<view class="menu-icon bg4">
					<image src="/static/image/my/cjwt.svg" mode="aspectFit"></image>
				</view>
				<text class="menu-text">{{ t('my.cjwt') }}</text>
				<image class="arrow" src="/static/icon/right.svg" mode="aspectFit"></image>
			</view>

			<view class="menu-item" @click="toLanguage">
				<view class="menu-icon bg5">
					<image src="/static/image/my/yyqh.svg" mode="aspectFit"></image>
				</view>
				<text class="menu-text">{{ t('my.yyqh') }}</text>
				<image class="arrow" src="/static/icon/right.svg" mode="aspectFit"></image>
			</view>

			<view class="menu-item" @click="goChangePassword">
				<view class="menu-icon bg6">
					<image src="/static/image/my/xgmm.svg" mode="aspectFit"></image>
				</view>
				<text class="menu-text">{{ t('my.xgmm') }}</text>
				<image class="arrow" src="/static/icon/right.svg" mode="aspectFit"></image>
			</view>

			<view class="menu-item" @click="toAbout">
				<view class="menu-icon bg7">
					<image src="/static/image/my/gywm.svg" mode="aspectFit"></image>
				</view>
				<text class="menu-text">{{ t('my.gywm') }}</text>
				<image class="arrow" src="/static/icon/right.svg" mode="aspectFit"></image>
			</view>

			<view class="menu-item" @click="loginOut">
				<view class="menu-icon bg8">
					<image src="/static/image/my/tcdl.svg" mode="aspectFit"></image>
				</view>
				<text class="menu-text">{{ t('my.tcdl') }}</text>
				<image class="arrow" src="/static/icon/right.svg" mode="aspectFit"></image>
			</view>
		</view>
		<uni-popup ref="popupRef" type="center" :mask-click="maskClick" @change="onChange">
			<view class="popup-mask" @click="close">
				<view class="custom-popup" @click.prevent.stop="">
					<view class="title">{{ t('my.tcdqzh') }}</view>
					<view class="check-box">
						<view class="img-box" @click="changeTipStatus">
							<image v-if="tipChecked" src="/static/icon/success.svg" mode=""></image>
						</view>
						<text>{{ t('my.xcbztx') }}</text>
					</view>
					<view class="but-box" @click="confirmLoginOut">{{ t('my.qrtc') }}</view>
					<view class="cancel-text" @click="close">{{ t('my.qxcz') }}</view>
				</view>
			</view>
		</uni-popup>
		<GlobalPopup ref="popup"></GlobalPopup>
		<!-- 底部tabbar -->
		<tabbar :currentTab="4"></tabbar>
	</view>
</template>

<script setup>
	import {
		ref,
		onMounted
	} from 'vue';
	import {
		useI18n
	} from 'vue-i18n';
	import { userApi, incomeApi } from '@/utils/api.js';
	import { TokenManager } from '@/utils/token.js';
	import kLine from "@/components/k_line/components/LineSeriesItem/lineSeriesItem.vue";
	
	const popupRef = ref()
	const popup = ref()
	const {
		t,
		locale
	} = useI18n();
	
	// 用户信息数据 - 从API获取
	const userInfo = ref({
		nickname: '',
		avatar: '',
		email: '',
		avatarBg: '',
		creditScore: 100, // 添加信誉分字段，默认值100
		availableBalance: 0 // 可用余额，用于人民币换算显示
	});
	
	// 收益数据 - 从API获取
	const incomeData = ref({
		totalProfit: 0, // 总资产
		todayProfit: 0  // 今日收益
	});
	
	// 账户盈亏数据 - 从API获取
	const profitData = ref({
		totalProfit: 0, // 账户盈亏
		frozenAmount: 0 // 冻结资产
	});
	
	const loading = ref(false);
	const tipChecked = ref(); //设置不再提醒
	const changeTipStatus = () => {
		tipChecked.value = !tipChecked.value
	}
	
	// 获取用户信息
	const getUserDetail = async () => {
		try {
			loading.value = true;
			const response = await userApi.getUserDetail();
			if (response.code === 0 && response.data) {
				userInfo.value = {
					nickname: response.data.nickname || '',
					avatar: response.data.avatar || '',
					email: response.data.email || '',
					avatarBg: response.data.avatarBg || '#f0f0f0',
					creditScore: response.data.creditScore || 100, // 从API获取信誉分
					availableBalance: response.data.availableBalance || 0 // 从API获取可用余额
				};
				
				// 保存邀请码到全局存储
				if (response.data.invitationCode) {
					TokenManager.setInvitationCode(response.data.invitationCode);
				}
			}
		} catch (error) {
			console.error('获取用户信息失败:', error);
			uni.showToast({
				title: '获取用户信息失败',
				icon: 'none'
			});
		} finally {
			loading.value = false;
		}
	};
	
	// 获取收益数据
	const getIncomeData = async () => {
		try {
			const response = await incomeApi.getIncome();
			if (response.code === 0 && response.data) {
				incomeData.value = {
					totalProfit: response.data.totalProfit || 0,
					todayProfit: response.data.todayProfit || 0
				};
			}
		} catch (error) {
			console.error('获取收益数据失败:', error);
			uni.showToast({
				title: '获取收益数据失败',
				icon: 'none'
			});
		}
	};
	
	// 获取账户盈亏数据
	const getProfitData = async () => {
		try {
			const response = await incomeApi.getProfit();
			if (response.code === 0 && response.data) {
				profitData.value = {
					totalProfit: response.data.totalProfit || 0,
					frozenAmount: response.data.frozenAmount || 0
				};
			}
		} catch (error) {
			console.error('获取账户盈亏数据失败:', error);
			uni.showToast({
				title: '获取账户盈亏数据失败',
				icon: 'none'
			});
		}
	};
	
	// 页面加载时获取用户信息和收益数据
	const accountAmount = ref([]);
	
	// 获取K线数据并转换格式
	const fetchAccountAmount = async () => {
		try {
			const response = await incomeApi.getKline(); // 假设API方法为getKline()
			if (response.code === 0 && Array.isArray(response.data)) {
				accountAmount.value = response.data.map(item => ({
					time: new Date(item.dateNum).getTime(),
					value: item.balance
				}));
			}
		} catch (error) {
			console.error('获取K线数据失败:', error);
		}
	};
	
	onMounted(() => {
		getUserDetail();
		getIncomeData();
		getProfitData();
		fetchAccountAmount(); // 新增调用
	});
	const openQuestionModal = () => {
		popup.value.open({
			title: '',
			content: '您在购买质押理财产品后会将资产冻结在这里哦！',
			showBut: true,
			loading: false,
			butText: "我知道了"
		})
	}
	// 关闭弹窗
	const close = () => {
		popupRef.value?.close()
	}
	
	// 格式化昵称，限制显示长度为6个字符，超出部分用省略号代替
	const formatNickname = (nickname) => {
		if (!nickname) return '';
		if (nickname.length <= 6) {
			return nickname;
		}
		return nickname.substring(0, 6) + '...';
	};
	// 退户登录
	const loginOut = () => {
		popupRef.value.open({
			title: '您在购买质押理财产品后会将资产冻结在这里哦！',
			content: '',
			loading: false,
		})

	}
	// 跳转充值
	const goRechange = () => {
		uni.navigateTo({
			url: "/pages/home/recharge"
		})
	}
	// 跳转提现
	const goWithdraw = () => {
		uni.navigateTo({
			url: "/pages/home/withdraw"
		})
	}
	// 跳转钱包页面
	const goWallet = () => {
		uni.navigateTo({
			url: "/pages/my/wallet/wallet"
		})
	}
	// 跳转消息页面
	const toMessage = () => {
		uni.navigateTo({
			url: "/pages/home/message"
		})
	}
	// 跳转faq页面
	const toFaq = () => {
		uni.navigateTo({
			url: "/pages/home/Faq"
		})
	}
	// 跳转关于我们页面
	const toAbout = () => {
		uni.navigateTo({
			url: "/pages/my/about"
		})
	}
	
	// 跳转语言页面
	const toLanguage = () => {
		uni.navigateTo({
			url: "/pages/language/language"
		})
	}
	// 跳转信用分页面
	const goCredit = () => {
		const creditScore = userInfo.value.creditScore || 100;
		uni.navigateTo({
			url: `/pages/my/credit?creditScore=${creditScore}`
		})
	}
	// 确认退出
	const confirmLoginOut = () => {
		uni.navigateTo({
			url: "/pages/account/login"
		})
	}
	// 跳转历史账单页面
	const goHistroy = () => {
		uni.navigateTo({
			url: "/pages/my/historyBill/pledgedBill"
		})
	}
	// 跳转个人信息页面
	const goMyInfo = () => {
		const nickname = userInfo.value.nickname || '';
		const email = userInfo.value.email || '';
		uni.navigateTo({
			url: `/pages/my/info/info?nickname=${encodeURIComponent(nickname)}&email=${encodeURIComponent(email)}`
		})
	}
	// 跳转实名认证页面
	const goRealName = () => {
		let isReal = uni.getStorageSync('isReal')||'0'
		let url = ""
		console.log(isReal)
		if (isReal == '0') {
			url = "/pages/my/realName/noReal"
		} else {
			url = "/pages/my/realName/realName"
		}
		uni.navigateTo({
			url: url
		})

	}
	// 跳转修改密码页面
	const goChangePassword = () => {
		uni.navigateTo({
			url: "/pages/my/changePassword"
		})
	}
</script>

<style scoped lang="scss">
	.content-box {
		min-height: 100vh;
		background-color: rgba(245, 246, 250, 1);
		padding-bottom: 100rpx;
		box-sizing: border-box;
		padding: 34.89rpx;
	}

	/* 用户信息区域 */
	.user-info {
		// padding: 30rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;

		.user-header {
			display: flex;
			align-items: center;
			margin-bottom: 14.43rpx;

			.avatar {
				width: 107.68rpx;
				height: 107.68rpx;
				border-radius: 50%;
				margin-right: 22.68rpx;
			}

			.user-name {
				display: flex;
				flex-direction: column;

				.name {
					font-size: 31.4rpx;
					font-weight: 500;
					letter-spacing: 0rpx;
					line-height: 45.46rpx;
					color: rgba(0, 0, 0, 1);
					margin-bottom: 6rpx;
				}

				.email {
					font-size: 24.42rpx;
					font-weight: 300;
					letter-spacing: 0rpx;
					line-height: 35.36rpx;
					color: rgba(102, 102, 102, 1);
				}
			}
		}

		.notification {
			position: relative;

			image {
				width: 40rpx;
				height: 40rpx;
			}

			.red-dot {
				position: absolute;
				top: 0;
				right: 0;
				width: 12rpx;
				height: 12rpx;
				border-radius: 50%;
				background-color: #FF0000;
			}
		}
	}

	/* 信用分 */
	.credit-score {
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 202.34rpx;
		height: 45.35rpx;
		opacity: 1;
		border-radius: 1742.54rpx;
		background: rgba(255, 255, 255, 1);
		box-shadow: 1.74rpx 3.49rpx 6.98rpx rgba(168, 165, 165, 0.25);
		margin-left: 20.93rpx;
		margin-bottom: 31.4rpx;
		// padding: 6.98rpx ;

		image {
			width: 26.16rpx;
			height: 26.16rpx;
			margin-left: 20.93rpx;
		}

		.credit-icon {
			font-size: 20.93rpx;
			font-weight: 400;
			letter-spacing: 0rpx;
			line-height: 30.32rpx;
			color: rgba(13, 179, 100, 1);
			margin-right: 20.93rpx;
		}
	}

	/* 资产信息 */
	.asset-info {
		display: flex;
		justify-content: space-between;
		border-radius: 13.95rpx;
		background: rgba(255, 255, 255, 1);
		box-shadow: 1.74rpx 1.74rpx 5.23rpx rgba(224, 222, 222, 0.25);
		padding: 20.93rpx 41.86rpx 27.91rpx 41.86rpx;
		margin-bottom: 38.37rpx;

		.asset-header {
			width: 100%;
			display: flex;
			justify-content: space-between;
			align-items: flex-end;

			.left {

				.title {
					// display: flex;
					font-size: 31.4rpx;
					font-weight: 500;
					color: rgba(0, 0, 0, 1);
					margin-bottom: 5.23rpx;

					.title-us {
						line-height: 45.46rpx;
						font-size: 24.42rpx;
						font-weight: 400;
						color: rgba(0, 0, 0, 1);
					}
				}

				.amount {
					font-size: 31.4rpx;
					font-weight: 500;
					letter-spacing: 0rpx;
					line-height: 45.46rpx;
					color: rgba(0, 0, 0, 1);
					margin-bottom: 6.98rpx;
				}

				.convert {
					font-size: 24.42rpx;
					font-weight: 400;
					letter-spacing: 0rpx;
					line-height: 35.36rpx;
					color: rgba(102, 102, 102, 1);
				}
			}

			.middle {
				.label {
					font-size: 24.42rpx;
					font-weight: 400;
					letter-spacing: 0rpx;
					line-height: 35.36rpx;
					color: rgba(0, 0, 0, 1);
					margin-bottom: 6.98rpx;
				}

				.value {
					font-size: 24.42rpx;
					font-weight: 400;
					letter-spacing: 0rpx;
					line-height: 35.36rpx;
					color: rgba(247, 56, 79, 1);

					&.positive {
						color: #4CD964;
					}

					&.negative {
						color: #FF3B30;
					}
				}
			}

			.right {
				.asset-chart {
					width: 142.57rpx;
					height: 48.37rpx;
					// margin-bottom: 26.16rpx;
					margin-bottom: 16rpx;

					image {
						width: 100%;
						height: 100%;
					}
				}

				.detail-item {
					display: flex;
					flex-direction: column;
					align-items: center;

					// width: 48%;
					.label {
						font-size: 24.42rpx;
						font-weight: 400;
						letter-spacing: 0rpx;
						line-height: 35.36rpx;
						color: rgba(0, 0, 0, 1);
						margin-bottom: 6.98rpx;
					}

					.value {
						font-size: 24.42rpx;
						font-weight: 400;
						letter-spacing: 0rpx;
						line-height: 35.36rpx;
						color: rgba(13, 179, 100, 1);

						&.positive {
							color: #4CD964;
						}

						&.negative {
							color: #FF3B30;
						}
					}
				}


			}

		}


	}

	.middle-box {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 31.4rpx;

		/* 质押冻结 */
		.frozen-asset {
			// width: 272.11rpx;
			// height: 156.99rpx;
			// width: 217.98rpx;
			height: 102.86rpx;
			border-radius: 13.95rpx;
			background: linear-gradient(137.42deg, rgba(121, 72, 234, 1) 0%, rgba(0, 186, 173, 1) 100%);
			font-size: 24.42rpx;
			color: rgba(255, 255, 255, 1);
			padding:40.18rpx 27.06rpx 14.06rpx;
			text-align: center;

			position: relative;
			.info-icon {
				// width: 17.35rpx;
				// height: 17.35rpx;
				// opacity: 1;
				text-align: right;
				position: absolute;
				top: 0;
				right: 0;
				padding:12rpx 16rpx;
				image {
					width: 17.35rpx;
					height: 17.35rpx;
					// text-align: right;
				}
			}

			.frozen-title {
				display: flex;
				align-items: center;
				margin-bottom: 15.7rpx;
				color: rgba(255, 255, 255, 1);

				.title-text {
					font-size: 24.42rpx;
					font-weight: 500;
					letter-spacing: 0rpx;
				}

				.title-us {
					font-size: 20.93rpx;
					font-weight: 400;
				}
			}

			.frozen-amount {
				font-size: 24.42rpx;
				font-weight: 500;
			}
		}

		/* 充值提现按钮 */


		.action-button {
			width: 156.99rpx;
			height: 156.99rpx;
			border-radius: 13.95rpx;
			background: rgba(255, 255, 255, 1);
			box-shadow: 1.74rpx 1.74rpx 5.23rpx rgba(224, 222, 222, 0.25);
			text-align: center;

			image {
				width: 61.05rpx;
				height: 69.11rpx;
				// margin-bottom: 10rpx;
				margin-top: 29.41rpx;
			}

			.text {
				font-size: 20.93rpx;
				font-weight: 500;
				letter-spacing: 0rpx;
				line-height: 30.32rpx;
				color: rgba(51, 51, 51, 1);
			}
		}
	}


	/* 菜单列表 */
	.menu-list {
		background-color: #FFFFFF;
		border-radius: 16rpx;
		overflow: hidden;
		margin-bottom: 150rpx;

		.menu-item {
			display: flex;
			align-items: center;
			padding: 30rpx;
			border-bottom: 1px solid #F5F5F5;

			&:last-child {
				border-bottom: none;
			}

			.menu-icon {
				width: 28.07rpx;
				height: 28.07rpx;
				padding: 12.07rpx;
				border-radius: 50%;
				margin-right: 20rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				image {
					width: 100%;
					height: 100%;
				}
			}
			.bg1{
				background: #2A82E488;
			}
			.bg2{
				background: #FF573388;
			}
			.bg3{
				background: #7948EA88;
			}
			.bg4{
				background: #43CF7C88;
			}
			.bg5{
				background: #E33C6488;
			}
			.bg6{
				background: #E3C42988;
			}
			.bg7{
				background: #A5D63F88;
			}
			.bg8{
				background: #60E6F088;
			}
			
			

			.menu-text {
				flex: 1;
				font-size: 28rpx;
				color: #333;
			}

			.arrow {
				width: 30rpx;
				height: 30rpx;
			}
		}
	}

	.popup-mask {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: rgba(51, 51, 51, 0.3);
		backdrop-filter: blur(2rpx);
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.custom-popup {
		border-radius: 52.33rpx;
		background: rgba(255, 255, 255, 1);
		// min-width: 348.84rpx;
		// max-width: 500rpx;
		padding: 174.43rpx 153.50rpx 61.06rpx;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;

		.title {
			font-size: 38.37rpx;
			font-weight: 500;
			letter-spacing: 0rpx;
			line-height: 55.57rpx;
			color: rgba(18, 24, 38, 1);
			margin-bottom: 140rpx;
		}

		.check-box {
			display: flex;
			align-items: center;
			margin-bottom: 31.4rpx;

			.img-box {
				width: 27.91rpx;
				height: 27.91rpx;
				opacity: 1;
				border-radius: 50%;
				border: 1.74rpx solid rgba(51, 51, 51, 1);
				text-align: center;
				line-height: 27.91rpx;
				margin-right: 10rpx;

				image {
					width: 16.79rpx;
					height: 16.67rpx;
				}
			}

			text {
				font-size: 24.42rpx;
				font-weight: 300;
				letter-spacing: 0rpx;
				line-height: 35.36rpx;
				color: rgba(51, 51, 51, 1);
			}
		}

		.but-box {
			width: 373.28rpx;
			height: 97.68rpx;
			line-height: 97.68rpx;
			border-radius: 26.16rpx;
			background: linear-gradient(90deg, rgba(12, 193, 155, 1) 0%, rgba(91, 220, 222, 1) 34.03%, rgba(5, 145, 198, 1) 65.97%, rgba(2, 120, 220, 1) 100%);
			font-size: 31.4rpx;
			letter-spacing: 0rpx;
			color: rgba(255, 255, 255, 1);
			text-align: center;
		}

		.cancel-text {
			margin-top: 36.64rpx;
			font-size: 27.91rpx;
			font-weight: 400;
			letter-spacing: 0rpx;
			line-height: 40.42rpx;
			color: rgba(0, 0, 0, 1);
		}
	}

</style>